import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image, ScrollView} from '@tarojs/components';
import {AtIcon} from "taro-ui";
import {gotoPage} from "../../../../utils/tools";
import {
  TARO_ENV,
} from '../../../../constants/api'
import Float from '../../../../components/float/float';
import './index.scss';

interface IProps {
  data: object
  showSubTitle?: any
  isUser: any
}

export default class ShangxinToday extends Component<IProps> {

  render() {
    let {data, isUser = false, showSubTitle = true}: any = this.props;data;
    data = data || {};
    data.color = data.color || "#fff";
    const dataColor = Taro.getStorageSync('colorData');
    return (
      <View className={`shangxin-today ${TARO_ENV + 'shangxin-today'}`}>
        {(data.name || data.moreUrl) &&
        <View className={`shangxin-today-title ${TARO_ENV + 'shangxin-today-title'}`} style={`background: linear-gradient(-180deg, ${data.color}, #fff);`}>
          <View className='shangxin-today-title-left'>
            {!!data.titleIcon && <Image src={data.titleIcon} className='imageStyle' />}
            { data.name }
          </View>
          {!!data.moreUrl && <View className='shangxin-today-title-right'>
            <View className='ret' onClick={() => gotoPage(data.moreUrl)}>
              更多
              <AtIcon value='chevron-right' size='16' color='#666' customStyle='line-height: inherit;' />
            </View>
          </View>}
        </View>}
        {!data.name && !data.moreUrl && <View style='height: 10px' />}
        <ScrollView scrollX className='scroll-view'>
          <View className='shangxin-today-block'>
            {
              data && data.data && data.data.map((item, index) => (
                <View className={index == 0? `shangxin-today-block-item m-l-0`: `shangxin-today-block-item`} key={index}>
                  <View key={item.id} className='scroll-item' onClick={()=>{Taro.navigateTo({url: item.url})}}>
                    <View className='shangxin-today-block-item-image'>
                      <Image mode='aspectFill' src={item.main_img || item.img} className='image' />
                      {process.env.DISTINGUISH_IDENTITY && !isUser && !!item.commission && !(item.is_free_visit && item.is_free_visit == 1 &&  (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin')) && <View className='commission_price'>
                          <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.commission} />
                      </View> }
                    </View>
                    <View className='shangxin-today-block-item-title'>
                      {item.name}
                    </View>
                    {showSubTitle && item.sub_title && <View className='shangxin-today-block-item-sub-title'>
                      {item.sub_title}
                    </View>}
                    {item.is_free_visit && item.is_free_visit == 1 &&  (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
                      <View className='fee-into'>免费入园</View> :
                      <View className={`shangxin-today-block-item-bottom ${!(item.discount || item.is_activity == 1) && 'baseline'}`}>
                      <View className='shangxin-today-block-item-bottom-price' style={`color: ${dataColor.priceColor};`}>
                        <Text className='shangxin-today-block-item-bottom-price-before'>￥</Text>
                        <View className='view-inline'><Float value={item.price || 0} /></View>
                      </View>
                      {(item.discount || item.is_activity == 1) &&
                        <Text className='shangxin-discount shangxin-today-block-item-bottom-box relative-top-five' style={` background-color: ${dataColor.priceColor};  `}>
                          {item.is_activity == 1? '拼团价': `${item.discount}折`}
                        </Text>
                      }
                      <View className='shangxin-today-block-item-bottom-original'>
                        {item.market_price || item.marketPrice || 0}
                      </View>
                    </View>}
                  </View>
                </View>
              ))
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}
